<template>
   <ul>
                <li v-for="(v,i) in arr" :key="i">
                  <router-link :to="v.link"> <span class="iconfont  iconfont1" :class="v.icon"></span>
                   <p :style="{ color: `${color}` }">{{v.name}}</p></router-link>
                    
                </li>
                
            </ul>
</template>

<script>
export default {
    props:{
        arr:Array,
        color:String
    }

}
</script>

<style scoped>

ul{
      width: 100%;
    height: 0.8rem;
    display: flex;
    justify-content: space-around;
}
ul>li{
    text-align: center;
    flex: 1;
    line-height: 0.3rem;
    font-size: 0.13rem;
}
.iconfont1{
    font-size: 0.25rem;
    
}
</style>